<template>
  <div class="data-item">
    <div class="data-number" v-if="type === 'number'" :style="{ color: numberColor }">
      {{ number }}
      <span class="data-unit" v-if="unit">{{ unit }}</span>
    </div>
    <div class="data-bar"  v-if="type === 'barProgress'">
      <BarProgress :value="number" :good="3" :warn="6" :max="10" />
    </div>
    <div class="data-circle"  v-if="type === 'circle'">
      <el-progress type="circle" :percentage="number" :width="60" :format="(percentage) => `${percentage}%`" :color="customColors" ></el-progress>
    </div>
    <div class="data-label" :style="{ color: labelColor }">{{ label }}</div>
  </div>
</template>

<script>
import BarProgress from "_c/BarProgress.vue";

export default {
  props: {
    type: {
      type: String,
      required: false,
      default: "number"
    },
    number: {
      type: [Number, String],
      required: true, // 数值为必传项
      default: 0
    },
    label: {
      type: String,
      required: true, // 标签为必传项
      default: ""
    },
    numberColor: {
      type: String,
      default: "#FFF" // 默认数值颜色
    },
    labelColor: {
      type: String,
      default: "#FFF" // 默认数值颜色
    },
    unit: {
      type: String,
      default: "" // 单位默认空，不显示
    }
  },
  components: {BarProgress},
  data() {
    return {
      customColors: [
        {color: '#f56c6c', percentage: 60},
        {color: '#e6a23c', percentage: 80},
        {color: '#5cb87a', percentage: 100}
      ],
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.data-item {
  flex: 1;
  text-align: center;
  padding: 0 10px;

  .data-number {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 8px;

    .data-unit {
      font-size: 14px;
      font-weight: normal;
      margin-left: 2px;
    }
  }

  .data-bar {
    width: 120px;
    margin: 10px auto;
  }

  .data-circle {
    width: 120px;
    margin: 10px auto;
  }

  .data-label {
    font-size: 13px;
    opacity: 0.9;
  }
}
</style>
